<template>
<div class="app-container">
    <div class="top">
      <el-tooltip
        class="item"
        effect="dark"
        content="广告管理"
        placement="top"
      >
        <el-button>广告列表</el-button>
      </el-tooltip>
    </div>
    <div class="left">
      <el-button type="primary" @click="addBanner">广告新增</el-button>
    </div>

    <!-- 用户列表模块 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column
        type="index"
        width="50"
      />
      <el-table-column
        prop="img_name"
        label="图片名称"
        width="180"
      />
      <el-table-column
        prop="status"
        label="是否显示"
      >
        <template slot-scope="scope">
          <el-form :model="form">
            <el-form-item label="">
              <el-switch v-model="scope.row.status" @change='changeStatus(scope.row)' />
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="图片"
      >
        <template slot-scope="scope">
          <img :src="$url.imgServe +  scope.row.img_url" class="banner-img" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="edit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="remove(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增用户模块 -->
    <el-dialog title="广告新增" :visible.sync="isVisible">
      <el-form :model="form">

        <el-form-item label="广告名称" label-width="120px">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="是否热销">
          <el-switch v-model="form.status" />
        </el-form-item>
        <!-- 文件上传功能 -->
        <el-form-item label="商品图片" prop="img">
          <ImgUpload v-model="form.img" name='uploadKey'>
            <template #tip>
              <div>商品图片限制2M以内</div>
            </template>
          </ImgUpload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { ImgUpload } from '@/components'

export default {
  name: 'BannerManage',
  components: {
    ImgUpload
  },
  data() {
   return {
      // 用于存放广告相关列表中的数据
      tableData: [],
      isVisible: false,
      form: {
        name: '',
        status: false,
        img: ''
      },
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      this.$api.getBanner({}).then(res => {
        this.tableData = res.data
      })
    },

    edit(index, row) {
      console.log(index, row)
    },

    remove(index, row) {
      console.log(index, row)
      this.$api.removeBanner({_id: row._id}).then(res => {
        this.init()
      })
    },

    addBanner() {
      this.isVisible = true
    },

    submit() {
      const data = {
        img_name: this.form.name,
        img_url: this.form.img,
        status: this.form.status,
        target_url: ''
      }
      this.$api.addBanner(data).then(() => {
        this.isVisible = false
        this.init()
      })
    },

    changeStatus (e) {
      const params = {
        _id: e._id,
        status: e.status
      }
      this.$api.changeStatus(params).then(() => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container {
    .top {
      text-align: center;
    }
    .banner-img {
      width: 50px;
      height: 50px;
    }
  }
</style>